<template>
	<div class="app-container">
		<view class="avatar-wrap">
			<image class="avatar-image" :src="userInfo.avatar" mode="aspectFill"></image>
			<view class="avatar-id">浪亭ID：{{ userInfo.id }}</view>
		</view>
		<view class="info-wrap">
			<view class="info-item">
				<view class="info-tit">昵称</view>
				<view class="info-txt">{{ userInfo.nickname }}</view>
			</view>
			<view class="info-item">
				<view class="info-tit">签名</view>
				<view class="info-txt">{{ userInfo.nickname }}</view>
			</view>
			<view class="info-item">
				<view class="info-tit">性别</view>
				<view class="info-txt">{{ userInfo.sex }}</view>
			</view>
			<view class="info-item">
				<view class="info-tit">生日</view>
				<view class="info-txt">{{ userInfo.nickname }}</view>
			</view>
			<view class="info-item">
				<view class="info-tit">手机</view>
				<view class="info-txt">{{ userInfo.phone }}</view>
			</view>
			<view class="info-item">
				<view class="info-tit">邮箱</view>
				<view class="info-txt">{{ userInfo.email }}</view>
			</view>
		</view>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
.avatar-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
	
	.avatar-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}
	.avatar-id {
		height: 30rpx;
		margin: 10rpx 0;
		padding: 0 20rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #999;
		border: 1px solid #999;
		border-radius: 60rpx;
	}
}
.info-wrap {
	display: flex;
	flex-direction: column;
	
	.info-item {
		display: flex;
		
	}
}
</style>